<template>
  <div>
    <!-- 顶部导航栏 固定定位-->

    <div class="header_top" style="background-color: #ffffff">
      <div class="warp">
        <div class="header">
          <div class="header_logo">
            <router-link to="/home" class="logo_a">易学啦</router-link>
          </div>
          <ul class="header_list clearfix">
            <li class="header_item fl">
              <router-link to="/home" tag="div" class="header_a">
                首页
              </router-link>
            </li>
            <li class="header_item fl">
              <router-link to="/videos" tag="div" class="header_a"
                >视频课程</router-link
              >
            </li>
            <li class="header_item fl">
              <router-link to="/EnListen" tag="div" class="header_a"
                >英语听力</router-link
              >
            </li>
            <li class="header_item fl">
              <router-link to="/materials/lists" tag="div" class="header_a"
                >各科资料</router-link
              >
            </li>
            <li class="header_item fl">
              <router-link
                to="/evaluating"
                tag="div"
                class="header_a"
                style="color: #ff0000"
                >作文测评</router-link
              >
            </li>
          </ul>

          <ul class="header_btn">
            <router-link to="/search" tag="li" class="search">
              <i class="iconfont icon-search" style="font-size: 18px"></i>
            </router-link>
            <li class="down-app">
              <router-link to="/appdown" class="" style="color: #fff">
                APP下载
              </router-link>
            </li>
            <li class="vip-icon">
              <router-link to="/vip" class="" style="color: #f76447">
                开通VIP
              </router-link>
            </li>

            <!-- 登录/注册 -->
            <div class="run-to" v-if="getShowlogin()">
              <li @click="showFun">
                <router-link to="/login" class=""> 登录 </router-link>
              </li>
              <li class="focus" style="color: #f76447">|</li>
              <li class="focus" @click="showFun">
                <router-link to="/sngin" class=""> 注册 </router-link>
              </li>
            </div>

            <!-- 个人头像 -->
            <div v-if="!getShowlogin()">
              <li
                class="user-centen"
                style="font-size: 14px; margin: 0 10px"
                @click="drawer = true"
              >
                <div class="uesrImg">
                  <img src="../assets/imgs/user-header.png" alt="" />
                </div>
              </li>
            </div>
          </ul>
        </div>
      </div>
    </div>
    <div class="header_top_ti" style="height: 80px; width: 100%"></div>
    <!-- 顶部导航栏 固定定位END-->

    <!-- 个人中心信息 -->
    <el-drawer
      title="个人中心"
      :visible.sync="drawer"
      size="20%"
      style="font-size: 20px; color: #333; font-weight: 700"
      v-if="!getShowlogin()"
    >
      <div>
        <div class="" style="padding: 10px 0px;">
          <!-- <el-button @click="innerDrawer = true" style="margin: 20px"
            >个人信息</el-button
          > -->
          <h3>个人信息</h3>
          <div
            class="box1"
            style="
              padding: 20px 0px;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
            "
          >
            <div
              class="boximgs"
              style="
                width: 80px;
                height: 80px;
                border-radius: 50%;
                overflow: hidden;
              "
              v-if="!getvip"
            >
              <img :src="headerimg" alt="用户头像" />
            </div>
            <div
              class="boximgs"
              v-if="getvip"
            >
              <div class="vipimg">
                <img src="../assets/imgs/buy_1.0096e21.png" alt="">
              </div>
              <img :src="headerimg" alt="用户头像" 
              style="
                width: 80px;
                height: 80px;
                border: 5px solid #f76447;
                border-radius: 50%;
                overflow: hidden;
              "/>
            </div>
            <div class="boxtext">
              <span>吃瓜者</span>
            </div>
            <div class="btn" @click="runvip">开通会员</div>
          </div>
        </div>
        <br />
        <div class="" style="padding: 10px 50px 200px 20px;">
          <!-- <el-button @click="innerFavorite = true" style="margin: 20px"
            >我的收藏</el-button
          > -->
          <h3>我的收藏</h3>
          <div class="box1"  style="height:100px;width:100%">
            <div class="item">
              
            </div>
          </div>
        </div>
        <br />
        <div
          class=""
          style="
            padding: 20px 0px;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          <el-button @click="tui">退出登录</el-button>
        </div>
        <br />
        <!-- <el-drawer
          title="个人信息"
          :append-to-body="true"
          :visible.sync="innerDrawer"
          style="font-size: 20px"
        >
          <p>_(:зゝ∠)_</p>
        </el-drawer>
        <el-drawer
          title="我是里面的2"
          :append-to-body="true"
          :visible.sync="innerFavorite"
        >
          <p>_(:зゝ∠)_</p>
        </el-drawer>-->
      </div> 
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "TopNav",
  data() {
    return {
      drawer: false,
      getvip: null,
      PassID:null,//验证登录
      innerDrawer: false, //个人信息
      innerFavorite: false, //我的收藏
      innerQuit: false, //退出登录
      headerimg: null,
    };
  },
  methods: {
    tui(){//推出登录
      this.PassID = null;
      localStorage.removeItem("PassID")
      localStorage.removeItem("userList")
      this.drawer=false;
    },
    runvip(){
      this.drawer=false;
      this.$router.push("vip")
      return
    },
    getuserimg() {
      if(localStorage.getItem("userList")){
        this.headerimg = JSON.parse(localStorage.getItem("userList")).userheader;
        this.PassID = "pass";
      }
    },
    showFun() {
      this.$emit("showtopFun", false);
    },
    getShowlogin() {
      this.getvip = localStorage.getItem("getvip")
      return !localStorage.getItem("PassID");
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
  },
  created() {
    this.getuserimg();
  },
  watch:{
    getvip:function(){
      console.log(1);
    },
    PassID:function(){
      this.getShowlogin()
      //  console.log(JSON.parse(localStorage.getItem("userList")).userheader);
    }
  }
};
</script>
<style scoped lang="scss">
.topcon {
  color: #39b392;
}

.box1 {
  background: rgba(204, 204, 204,0.25);
  margin: 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 7px 2px #999;
  .boximgs {
    text-align: center;
    margin-top: 20px;
    position: relative;
    .vipimg{
      position: absolute;
      width: 30px;
      height: 30px;
      border: 1px solid #333;
      border-radius: 50%;
      bottom: 0px;
      right: 0px;
      img{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .boxtext {
    margin: 35px;
  }
  .btn {
    width: 50%;
    text-align: center;
    margin: 100px auto;
    color: #48c5a3;
    background: rgba(72, 197, 163,0.2);
    padding: 10px 15px;
    border-radius: 10px;
  }
}

/* 顶部导航条 */
.header_top {
  width: 100%;
  height: 80px;
  background: #fff;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 4%);
  position: fixed;
  z-index: 99;
}
.header {
  display: flex;
  align-items: center;
}
.header_logo {
  a {
    display: block;
    height: 80px;
    width: 90px;
    background: url(../assets/imgs/logo.png) no-repeat center center;
    background-size: 100%;
    text-indent: -99999em;
  }
}
.header_list {
  color: #333;
  flex: 1;
  justify-content: center;
  align-self: center;
  margin-left: 30px;
  .header_item {
    font-size: 18px;
    margin: 0 30px;
    cursor: pointer;
    .header_a {
      &:hover {
        color: #48c5a3;
      }
    }
  }
}
.header_btn {
  margin-left: auto;
  padding: 0;
  display: flex;
  align-items: center;
  height: 31px;
  display: flex;
  li {
    font-size: 14px;
    margin: 0 10px;
    cursor: pointer;
    img {
      width: 34px;
      height: 34px;
      border-radius: 50%;
    }
  }
  .down-app {
    padding: 6px 10px;
    border-radius: 25px;
    background-color: #39b392;
    margin-right: 10px;
  }
  .vip-icon {
    padding: 4px 10px;
    border-radius: 25px;
    border: 2px solid #f76447;
  }
}
.header_btn .search,
.header_btn a {
  color: #333;
  font-size: 14px;
}
.header_btn li a:hover,
.header_btn li:hover,
.header_list .header_item:hover {
  color: #48c5a3;
}
.header_item {
  a {
    &.con {
      color: #48c5a3;
    }
  }
}
</style>
